
	<!-- row -->

	<div class="row" style="overflow-y: hidden;height:100%;padding-bottom:10px;">

		<!-- a blank row to get started -->
		<div class="col-lg-3 col-md-4 col-sm-5" style="height: 100%;">
			<div style="height: 100%;background-color:#fff;">
				<select class="form-control input-sm lineSearch col-12"></select>

				<div id="stationsDiv" >
					<ul class="mui-table-view sortable" id="stationUl"></ul>
				</div>
				<form class="smart-form">
					<fieldset>
						<section class=" col-xs-9">
							<label class="input">
								<input type="text" id="editStationName" placeholder="站牌名称">
							</label>
						</section>
						<section class=" col-xs-3">
							<label class="input"> 
								<input type="text" id="editStationCompass" placeholder="东南西北">
							</label>
						</section>
						<section class="col-xs-9">
							<label class="input">
								<input type="text"  id="editStationPinyin" placeholder="拼音,例:pinyin">
							</label>
						</section>
						<section class="col-xs-3">
							<label class="input">
								<input type="text"  id="editStationSzm" placeholder="首字母,例:py">
							</label>
						</section>
						<section class="col-xs-12">
							<label class="input">
								<input type="text"  id="editStationRoad" placeholder="相关参考物或主干道">
							</label>
						</section>
						<section class="col-xs-12">
							<label class="input">
								<input type="text"  id="editStationTag" placeholder="其他备注，前台不显示">
							</label>
						</section>
					</fieldset>
				</form>
				<div style="padding:5px 5px 10px 5px;background-color:#eee">
					<div style="padding:4px 3px">
						<a class="btn btn-labeled btn-warning" id="submitSingle"> 
							<span class="btn-label"><i class="fa fa-save"></i></span>单站保存 
						</a>
						<a class="btn btn-labeled btn-success pull-right" id="submitAll"> 
							<span class="btn-label"><i class="fa fa-copy"></i></span>保存全部 
						</a>
					</div>
				</div>

			</div>

		</div>
		<div class="row col-lg-9 col-md-8 col-sm-7" style="height: 100%;"  id="map_main">
		</div>
			
	</div>


<script type="text/javascript">
	var lid = 0;
	var sid = 0;
	var lineInfo = null;
	var map_main =null;
	var searchTime = 0;
	var autoNext = false;
	//$('body').append($('#addStationModal'));
	//$('body').append($('#newStationModal'));
	//$('body').append($('#editLineInfoModal'));
	
	
		
	$(window).resize(function() {
		setTimeout(function(){
			$('#stationsDiv').height($(window).height() - 322 - $("#stationsDiv").offset().top);
		},50);		
		if(Date.parse(new Date())-searchTime >10000){
			$(".lineSearch").select2({
				ajax: {
					dataType: 'json',
					delay:250,
					url: function(){
						searchTime = Date.parse(new Date());
						return "//api.waitbus.com/v3/?mothed=getLinesBylNames&lid=" + lid + "&token=" + token; 
					},
					processResults: function (data, params) {
						params.page = 1;
						var itemList = [];
						if(data.status.code==0){
							var arr = data.result;
							for(var item = 0; item<arr.length;item++){
								 itemList.push({id: arr[item].lID, text:arr[item].lName + " " + arr[item].lStartName + " - " + arr[item].lEndName})
							}
						}else{
							if(data.status.code!=-7)alert(data.status.msg);
						}
						if(map_main!=null){
							itemList.push({id:Math.floor(Math.random()*-1000),text:'地图中心区域附近站点'});
						}
						return {results: itemList,pagination: {more: false}};
					},
				},
				placeholder:'请搜索线路',//默认文字提示
			});
		}
		if($(window).width()>749){
			if(map_main == null){
				map_main = new BMap.Map("map_main",{enableMapClick:false});
				map_main.centerAndZoom("济南");
				map_main.setCurrentCity("济南");        //由于有3D图，需要设置城市哦
				map_main.enableScrollWheelZoom();
				var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});
				map_main.addControl(mapType2);          //左上角，默认地图控件
				var ctrl = new BMapLib.TrafficControl({
				   showPanel: false //是否显示路况提示面板
				});  
				map_main.addControl(ctrl);
				ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);  
				map_main.setMapStyle({styleJson:[{"featureType": "poilabel","elementType": "labels","stylers": {"visibility": "off"}}]});
			}
		}
	});

	$(".lineSearch").on("select2:select",function(e){
		searchTime = 0;
	　　lid = e.params.data.id
		sid=0;
		if(lid>=0){
			$.getJSON("//api.waitbus.com/v3/?mothed=getLineInfoWithLinesBylID&lid=" + e.params.data.id + "&token=" + token,function(data){
				if(data.result){
					lineInfo = data.result;
					reloadLine();
					var i=Math.floor(lineInfo.lStation.length/2);
					map_main.centerAndZoom(new BMap.Point(lineInfo.lStation[i].sLng + 0.012316,lineInfo.lStation[i].sLat + 0.006531),15);
				}
			});
		}else{
			$.getJSON("//api.waitbus.com/v3/?mothed=getStationsAllInfoByNear&lng=" +  (map_main.getCenter().lng - 0.012316) + "&lat=" +  (map_main.getCenter().lat - 0.006531) + "&token=" + token,function(data){
				if(data.result){
					lineInfo = {lStation:data.result};
					reloadLine();
				}
			});
			
		}
	});

	$("#submitAll").click(function(){
		if(lineInfo==null){
			$.bigBox({
				title : "线路未选择！",
				content : "在保存之前，请先确认已经搜索过线路",
				color : "#C79121",
				timeout: 8000,
				icon : "fa fa-times fadeInLeft animated",
			});
			
		}else{
			for(var i=0;i<lineInfo.lStation.length-1;i++){
				submitStationInfo(lineInfo.lStation[i],false);
			}
			submitStationInfo(lineInfo.lStation[i],true);
		}
	});
	$("#submitSingle").click(function(){
		if(lineInfo==null){
			$.bigBox({
				title : "线路未选择！",
				content : "在保存之前，请先确认已经搜索过线路",
				color : "#C79121",
				timeout: 8000,
				icon : "fa fa-times fadeInLeft animated",
			});
			
		}else{
			lineInfo.lStation[sid].sName = $('#editStationName').val();
			lineInfo.lStation[sid].sCompass = $('#editStationCompass').val();
			lineInfo.lStation[sid].sPinyin = $('#editStationPinyin').val();
			lineInfo.lStation[sid].sSzm = $('#editStationSzm').val();
			lineInfo.lStation[sid].sRoad = $('#editStationRoad').val();
			lineInfo.lStation[sid].sTag = $('#editStationTag').val();
			submitStationInfo(lineInfo.lStation[sid],true);
		}
	});
	  
	function submitStationInfo(info,showmsg){
		$.post('//api.waitbus.com/v3/?mothed=updateStationInfo' + "&token=" + token,info,function(data){
			res = JSON.parse(data);
			if(res.status.code==0){
				if(showmsg){
					reloadLine();
					$.bigBox({
						title : "保存成功",
						content : "您提交的线路数据（包括基础信息和站点信息）均已提交成功",
						color : "#739E73",
						timeout: 8000,
						icon : "fa fa-check",
					});
				}
			}else{
				$.bigBox({
					title : "出现错误",
					content : res.status.msg + " [" + res.status.code + "]",
					color : "#C79121",
					timeout: 8000,
					icon : "fa fa-times fadeInLeft animated",
				});
			}
		});		
	}
	
	function reloadLine(){
		var stationUlHtml = "";
		var points = [];
		var point = null;
		var marker = null;
		var label = null;
		var myIcon = new BMap.Icon("http://api0.map.bdimg.com/images/stop_icon.png", new BMap.Size(11,11));
		for(var i=0;i<lineInfo.lStation.length;i++){
			stationUlHtml += '<li class="mui-table-view-cell mui-media" id="busStationli' + i + '"><a href="javascript:;"><div class="mui-media-body">'
				+ (i+1) + '. ' + lineInfo.lStation[i].sName +(lineInfo.lStation[i].sCompass ==''?'':'<span class="text-muted"> - ' + lineInfo.lStation[i].sCompass + ' </span>')
				+'<p class="mui-ellipsis-2 pull-right">' + lineInfo.lStation[i].sTag + '</p>'
				+ '</div></a></li>';
		}
		$("#stationUl").html(stationUlHtml);
		showStationInfo();
		$(window).resize();
		if(map_main!=null){
			map_main.clearOverlays();
			for(var i=0;i<lineInfo.lStation.length;i++){
				point = new BMap.Point(lineInfo.lStation[i].sLng + 0.012316,lineInfo.lStation[i].sLat + 0.006531);
				marker = new BMap.Marker(point,{icon:myIcon});
				map_main.addOverlay(marker);
				if(!isIE()){
					label = new BMap.Label(lineInfo.lStation[i].sName +(lineInfo.lStation[i].sCompass ==''?'':' - ' + lineInfo.lStation[i].sCompass),{offset:new BMap.Size(10,-5)});
					label.setStyle({color : "#fafafa",fontSize : "8px",backgroundColor :"0.05",border :"0",textShadow:"2px 2px 2px #333"});
					marker.setLabel(label);
				}
				marker.addEventListener("dragend",function(e){
					getDragPointID(e.target);
					
				});
				marker.addEventListener("click",function(e){
					getDragPointID(e.target);
				});
				marker.enableDragging();
				points.push(point);
				
			}
			if(lid>=0){
				var polyline = new BMap.Polyline(points, {strokeColor:"#5298ff",strokeWeight:6,strokeOpacity:0.9}); 
				map_main.addOverlay(polyline);
			}
		}
		$("#stationsDiv li" ).on('click', function(e){
			var strID =e.currentTarget.id;
			sid=parseInt(strID.substr(12));
			if(map_main!=null){
				map_main.centerAndZoom(new BMap.Point(lineInfo.lStation[sid].sLng + 0.012316,lineInfo.lStation[sid].sLat + 0.006531),19);
			}
			showStationInfo();
		});
	}

	function showStationInfo(){
		if(lineInfo==null)return false;
		$('#editStationName').val(lineInfo.lStation[sid].sName);
		$('#editStationCompass').val(lineInfo.lStation[sid].sCompass);
		$('#editStationPinyin').val(lineInfo.lStation[sid].sPinyin);
		$('#editStationSzm').val(lineInfo.lStation[sid].sSzm);
		$('#editStationRoad').val(lineInfo.lStation[sid].sRoad);
		$('#editStationTag').val(lineInfo.lStation[sid].sTag);

	}
	function getDragPointID(target){
		overlays = map_main.getOverlays();
		for(i=0;i<lineInfo.lStation.length;i++){
			if(target==overlays[i]){
				sid=i;
				lineInfo.lStation[i].sLng = target.point.lng - 0.012316;
				lineInfo.lStation[i].sLat = target.point.lat - 0.006531;
				reloadLine();
				showStationInfo();
				break;
			}
		}
		if(autoNext)nextEditStation();
	}

	function isIE() {
		return (!!window.ActiveXObject || "ActiveXObject" in window);
	}
	
	var pagedestroy = function(){
		map_main =null;
		searchTime = 0;
	}
	
	Array.prototype.insert = function (index, item) {
		this.splice(index, 0, item);
	};

	function uploadStation(){
		$.post('//api.waitbus.com/v3/?mothed=createNewStation' + "&token=" + token,staInfo,function(data){res = JSON.parse(data);if(res.status.code==0){lineInfo.lStation.insert(lineInfo.lStation.length,res.result[0]);reloadLine();}});
	}
	
	function sleep(numberMillis) {
		var now = new Date();
		var exitTime = now.getTime() + numberMillis;
		while (true) {
			now = new Date();
			if (now.getTime() > exitTime)
				return;
		}
	}
	
	function nextEditStation(){		
		if(sid<lineInfo.lStation.length-1){
			sid++;
			showStationInfo();
			if(lineInfo.lStation[sid].sTag=='█'){
				nextEditStation();
			}else{
				if(map_main!=null){
					map_main.centerAndZoom(new BMap.Point(lineInfo.lStation[sid].sLng + 0.012316,lineInfo.lStation[sid].sLat + 0.006531),19);
				}
			}
		}
	}
	$(window).resize();
	var staInfo={};
	var a ={};
</script>




